<template>
  <div>
    <Titlehead uname="设备统计" />
 
    <div id="elementpaicharts5"></div>

  </div>
</template>
  
  <script>
import Titlehead from "../firstTitle";
 
import * as echarts from "echarts";

export default {
  data() {
    return {
      timer: null,

      count: 0,
      options: {},
      colorlist: ["#DF3AB9", "#18C79C", "#8555F9", "#F09228", "#F90228"],
      pieData: [],
      arr: [ ],
      option: null,

    };
  },
  components: {
    Titlehead,
 
  },

  mounted() {
 this.initeache()
  },

  methods: {
 initeache(){
  this.chart = echarts.init(document.getElementById("elementpaicharts5"));

  let data = [{
    name: "在线率",
    value: 40,
    id:0
}, {
    name: "使用率",
    id:1,
    value: 30
}, {
    name: "充电中",
    id:2,
    value: 20
}, {
    name: "在线",
    id:3,
    value: 10
} ,{
    name: "离线",
    id:4,
    value: 60
}]
let value = data.map((item) => item.value)
let sum = value.reduce((a, b) => {
    return a + b
})
 
let color = ["#6d9de0", "#49d896", "#f5d03a", "#f5853a", "#f5503a"];

let series = []
let yAxis = []
let that=this
for (let i = 0; i < data.length; i++) {
    series.push({
        name: "",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [65 - i * 10 + "%", 61 - i * 10 + "%"],
        // radius: [45 - i * 10 + "%", 41 - i * 10 + "%"],

        center: ["20%", "45%"],


        label: {
            show: false
        },
        itemStyle: {
                   borderWidth: 30, //圆柱图宽度
                    borderRadius: 30, //光环宽度
                    borderColor: 'rgba(0, 0,0, 0)',
                    borderDashOffset: 20,
        },
        data: [
          {
                value: data[i].value,
                name: data[i].name,
            },
            {
                value: sum - data[i].value,
                name: "",
                itemStyle: {
                    color: 'transparent',
                },
                hoverAnimation: false
            }
        ]
    })
    series.push({
        name: "",
        type: "pie",
        silent: true,
        z: 1,
        clockWise:false, //顺时加载
        hoverAnimation:false, //鼠标移入变大
        radius: [65 - i * 10 + "%", 61 - i * 10 + "%"],

        center: ["20%", "45%"],
        label: {
            show: false
        },
        itemStyle: {
            borderWidth: 30, //圆柱图宽度
            borderRadius: 30, //光环宽度
            borderColor: 'rgba(0, 0,0, 0)',
            borderDashOffset: 20,
        },
        data: [
          {
                value: 7.5,
                itemStyle: {
                    color:"#27195ae0",
                },
                hoverAnimation: true
            },
            {
                value: 2.5,
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                },
                hoverAnimation: false
            }
        ]
    })
    yAxis.push(((data[i].value / sum) * 100).toFixed(2) + "%")
}
that.option = {
    color: color,
    legend: {
        show: true,
        icon: "rect",
        top: "10%",
        right : "10%",
        data: name,
         itemWidth:20,
         itemHeight:20,
        width:10,
        itemGap:10,
        orient:'horizontal',
        formatter: (name) => {
          let itemchange=data.find((item) => {
               
               return  item.name == name
           })
         if(  itemchange.id<2){
          return (
                "{title| " + name + "}{value| "+ yAxis[itemchange.id] + " } "
            );
         }else{
          return( 
          "{title| " + name + "}{value| " + itemchange.value  + " }{value| 台} {value| "+yAxis[itemchange.id] + " } "
          )
         }
            
        },
        textStyle: {
          color: "#fff",
          fontSize:12,
          rich: {
          
            b: { color: "#fff", width: 60 },
         },
           
        }
    },

    grid: {
      top: "12%",
        right: "40%",
        width:"40%",
        height:"21%",
        containLabel: false
    },
    yAxis: [{
        type: "category",
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval:0,
            inside: true,
            textStyle: {
                color: "#fff",
                fontSize: 12,
              
            },
            show: true
        },
        data: yAxis
    }],
    xAxis: [{
        show: false,
    }],
    series: series
};
that.chart.setOption(that.option);

 }
 
  },
};
</script>
  
<style lang="scss" scoped>
#elementpaicharts5 {
  height:250px;
  width: 450px;
  color: #27195ae0;
}
</style> 